<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .bigbox{
            width: 320px;
            height: 580px;
            border: 1px solid #959595;
            border-radius: 20px;
            position: relative;
       }
       .top{
           
            height: 30px;
            border-radius: 20px 20px 0 0;
            background-color:pink;
       }
       i{
        transform: scaleX(-1);
       }
       .top p{
            font-size: 16px;
            display: inline;
            margin-left: 38%;
            margin-top: 10px;
       }
       .smalebox{
            width: 320px;
            height: 550px;
     
            background-color: #fffefe;
            border-radius: 0 0 20px 20px;
       }
       #talk{
            width: 320px;
            height: 508px;
            overflow: hidden;
       }
       .input{
            width: 320px;
            height: 42px;
            display: flex;
            background-color:pink;
            border-radius: 0 0 20px 20px;
       }
       img{
            width: 42px;
            height: 42px;
            border-radius: 50%;
       }
       button{
            width: 42px;
            height: 42px;
            border-radius: 0 0 20px ;
            border: 0;
            background-color: rgb(185, 225, 240);
       }
       input{
            width:236px ;
            border: 1px solid #dfcbf8;
       }
       strong{
            display: flex;
            width: 300px;
            align-items: center;
            padding: 10px;
       }
       span{
        margin: 8px;
        background-color: #dfcbf8;
        box-shadow: 12px 10px 8px 1px rgba(0, 0,0, 0.1);
        padding: 10px;
        border-radius: 10px;
       }
       .change{
            display: flex;
            flex-direction: row-reverse; /* 交换图片和文字的位置 */
       }
     .change span {
          background-color: #f7d7c7;
     }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="top">
            <i class="iconfont icon-arrow-right"></i>
            <p>乖乖</p>
        </div>
        <div class="smalebox">
            <div id="talk">
               
            </div>
            <div class="input">
                <img id="my" src="./images/Q1.jpg" alt="">
                <input id="isText" type="text" title="text" placeholder="">
                <button id="isSend">发送</button>
        </div>
    </div>
</body>
<script>
     var oTalk=document.getElementById('talk')
     var oMy=document.getElementById('my')
     var oText=document.getElementById('isText')
     var oSend=document.getElementById('isSend')
     var oT=document.getElementById('t')
     var love=1
     
     oMy.onclick=function(){
       if(love==1){
        oMy.src='./images/Q2.jpg'
        love=0
       }else{
        oMy.src='./images/Q1.jpg'
        love=1
       }
    }
    
    //建立链接
    const socket=new WebSocket('ws://localhost:8080')
    socket.addEventListener("message",async (event)=>{
     oSend.onclick=function(){
          let word=oText.value
     let but=love==1?'Q1':'Q2'
     let bu=love==1?'change':''
       oTalk.innerHTML+=`<p>
            <strong id="t"class="m ${bu}">
               <img  src="./images/${but}.jpg" alt="">
               <span>${word}</span>  
            </strong>
        </p>`
        //发送消息
        socket.send(word)
         oText.value=''
    }
     let data = await event.data
     console.log("Message from server ", data);
     
    })
</script>
</html>